<template>
    <el-dialog :title="wintitle" :visible.sync="displayWin" width="80%" :lock-scroll="true" :close-on-click-modal="false">
        <div class="device_edit">
            <el-form :model="order" label-width="90px">
                <el-row :gutter="15">
                    <el-col :span="18">
                        <el-row :gutter="15">
                            <el-col :span="8" label-width="30px">
                                <el-form-item label="所属区域:">
                                    <el-cascader :options="backstageData" :show-all-levels="true" :props="{ checkStrictly: false }" :key="1000" v-model="form.areaids" clearable @change="areaChange"></el-cascader>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" label-width="30px">
                                <el-form-item label="设备类型:">
                                    <el-select v-model="form.type_id" placeholder="请选择设备类型">
                                        <el-option v-for="(t, i) in deviceTypes" :key="i" :label="t.name" :value="`${t.id}`"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" label-width="30px">
                                <el-form-item label="设备名称:">
                                    <el-input v-model="form.device_name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="15">
                            <el-col :span="8" label-width="30px" v-if="form.id && form.id">
                                <el-form-item label="设备状态:">
                                    <el-select v-model="form.status" placeholder="请选择设备状态">
                                        <el-option label="停机" :value="0"></el-option>
                                        <el-option label="正常" :value="1"></el-option>
                                        <el-option label="告警" :value="2"></el-option>
                                        <el-option label="离线" :value="3"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" label-width="30px">
                                <el-form-item label="设备编号:">
                                    <el-input v-model="form.device_code"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="设备图片:">
                            <el-upload class="avatar-uploader" :action="action" :headers="headers" :on-preview="handlePreview" accept=".jpg,.png,.bmp" :on-success="handSuccess" :show-file-list="false">
                                <img class="avatar" v-if="form.device_img" :src="static_url + form.device_img" />
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div class="table" v-if="!openId">
                <div class="row" style="color: #fff">
                    <div>测点名称</div>
                    <div>地址</div>
                    <div>端口</div>
                    <div>安装方向</div>
                    <div>测点FS</div>
                    <div>终端类型</div>
                    <div>特征值</div>
                </div>
                <div style="max-height: 300px; overflow-y: auto">
                    <div class="row" v-for="(t, i) in form.sensors" :key="i">
                        <div>
                            <el-input v-model="t.sensor_name" />
                        </div>
                        <div>
                            <el-input v-model="t.address"></el-input>
                        </div>
                        <div>
                            <el-input v-model="t.port"></el-input>
                        </div>
                        <div>
                            <el-select v-model="t.direction" placeholder="">
                                <el-option v-for="t in directionTypes" :key="t.value" :label="t.label" :value="t.value"></el-option>
                            </el-select>
                        </div>
                        <div>
                            <el-input-number v-model="t.fs" :controls="false"></el-input-number>
                        </div>
                        <div>
                            <el-select v-model="t.sensor_type" placeholder="请选择终端类型" @change="handleChange($event, i)">
                                <el-option v-for="(t, i) in sensorTypes" :key="i" :label="t.name" :value="t.id"></el-option>
                            </el-select>
                        </div>
                        <div class="sp">
                            <el-select disabled v-model="t.eigenvalue" multiple filterable allow-create default-first-option placeholder="选择终端类型后自动填入">
                                <el-option v-for="item in eigenvalues" :key="item.id" :label="item.name" :value="`${item.id}`"></el-option>
                            </el-select>
                        </div>
                        <i style="font-size: 28px; width: 50px; text-align: center; color: #007bff; margin: auto 0" v-if="i !== 0" @click="deleteRow(i)" class="pointer cursor el-icon-circle-close"></i>
                        <p style="width: 50px" v-else></p>
                    </div>
                    <div class="pointer add" @click="addRow()">新增测点</div>
                </div>
            </div>
            <div class="btn">
                <el-button type="primary" @click="submitForm">保存</el-button>
                <el-button type="info" @click="displayWin = false">取消</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
import { deepClone } from '@/plugins/clone'
const formModel = Object.assign(
    {},
    {
        id: '',
        areaids: [],
        group_id: '',
        company_id: '',
        factory_id: '',
        zone_id: '',
        type_id: '',
        device_name: '',
        device_img: '',
        sensors: [
            {
                sensor_name: '',
                group_id: '',
                company_id: '',
                factory_id: '',
                zone_id: '',
                device_id: '',
                address: '',
                port: '',
                sensor_type: '',
                eigenvalue: [],
                direction: '',
                fs: '12800',
            },
        ],
        status: '',
    },
)

import { requestApi, getEigApi, devicePageDetailsApi } from '@/requset/api'
export default {
    data() {
        return {
            static_url: '/static',
            displayWin: false,
            openId: null,
            eigenvalues: [],
            deviceTypes: [],
            sensorTypes: [],
            directionTypes: [
                {
                    label: 'A轴向',
                    value: 'A',
                },
                {
                    label: 'H水平',
                    value: 'H',
                },
                {
                    label: 'V垂直',
                    value: 'V',
                },
            ],
            form: formModel,
            action: '/api/report/upload',
            headers: {
                Authorization: '',
            },
        }
    },
    created() {
        this.eigenvalues = this.eigenvalueTags
        this.sensorTypes = this.sensorType
        this.deviceTypes = this.deviceType
        let token = sessionStorage.getItem('token')
        this.headers.Authorization = token
    },
    methods: {
        doOpen(id) {
            this.openId = id
            this.form = JSON.parse(JSON.stringify(formModel))
            this.displayWin = true
            if (!id || id.length <= 0) return
            devicePageDetailsApi(id).then((res) => {
                if (res.data.code != 0) return
                this.form = res.data.data
                this.form.areaids = [this.form.group_id, this.form.company_id, this.form.factory_id, this.form.zone_id]
                this.form.sensors.map((t) => {
                    t.eigenvalue = t.eigenvalue.split(',')
                })
                if (this.form.sensors.length <= 0) this.addRow()
            })
        },
        handlePreview(pic) {},
        handSuccess(file) {
            if (file.code !== 0) {
                this.$message({
                    type: 'info',
                    message: '图片上传失败',
                })
                return
            }
            this.form.device_img = file.data
        },
        submitForm() {
            if (this.form.id && this.form.id > 0) {
                let a = deepClone(this.form)
                delete a.sensors
                requestApi('post', 'device/edit', a)
                    .then((res) => {
                        if (res.data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '修改成功',
                            })
                            this.displayWin = false
                            this.$emit('get')
                        } else {
                            this.$message({
                                type: 'info',
                                message: res.data.msg,
                            })
                        }
                    })
                    .catch((err) => {
                        console.log('err', err)
                    })
                return
            }

            requestApi('post', 'device/add', this.form).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '添加成功',
                    })
                    this.displayWin = false
                    this.$emit('get')
                } else {
                    this.$message({
                        type: 'info',
                        message: '添加失败',
                    })
                }
            })
        },
        areaChange(a, b, c) {
            if (a.length != 4) return
            this.form.group_id = a[0]
            this.form.company_id = a[1]
            this.form.factory_id = a[2]
            this.form.zone_id = a[3]
        },
        addRow() {
            this.form.sensors.push(JSON.parse(JSON.stringify(formModel.sensors[0])))
        },
        deleteRow(i) {
            this.form.sensors.splice(i, 1)
        },
        handleChange(e, i) {
            let sensor_type = this.form.sensors[i].sensor_type
            getEigApi({ sensor_type }).then((res) => {
                if (res.data.code == 0) {
                    this.$set(this.form.sensors[i], 'eigenvalue', res.data.data.split(','))
                }
            })
        },
    },
    computed: {
        ...mapState('backstage', ['backstageData', 'deviceType', 'eigenvalueTags', 'sensorType', 'dbList']),
        wintitle() {
            return this.form.id && this.form.id > 0 ? '修改设备' : '新增设备'
        },
    },
}
</script>

<style scoped lang="less">
.device_edit {
    ::v-deep {
        .el-form-item__content {
            display: flex;
        }

        .el-cascader {
            width: 100%;
        }
    }

    .btn {
        padding-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .add {
        margin-left: 3px;
        margin-top: 5px;
        font-size: 18px;
        border-radius: 4px;
        width: calc(100% - 60px);
        text-align: center;
        height: 40px;
        line-height: 40px;
        color: #007bff;
        border: #007bff solid 1px;
    }
}

.sp {
    ::v-deep {
        .el-input__suffix {
            display: none;
        }

        .el-select .el-input.is-disabled .el-input__inner {
            cursor: default;
        }

        .el-select__tags {
            width: 100%;
            max-width: 100% !important;
            padding: 0;
            margin: 0;
        }
    }
}

.row {
    display: flex;

    > div {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px;
    }
}

.table {
    .row > div:nth-child(1) {
        width: 180px;
        max-width: 180px;
    }

    .row > div:nth-child(2) {
        width: 80px;
        max-width: 80px;
    }

    .row > div:nth-child(3) {
        width: 80px;
        max-width: 80px;
    }

    .row > div:nth-child(4) {
        width: 90px;
        max-width: 90px;
    }

    .row > div:nth-child(5) {
        width: 80px;
        max-width: 80px;
    }

    .row > div:nth-child(6) {
        width: 190px;
        min-width: 190px;
        max-width: 190px;
    }

    ::v-deep {
        .el-select {
            width: 100%;
        }

        .el-input-number {
            width: 100%;

            .el-input__inner {
                width: 100%;
            }
        }
    }
}

.avatar-uploader .el-upload {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #007bff;
    width: 130px;
    height: 130px;
    line-height: 130px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #007bff;
}

.avatar {
    width: 130px;
    height: 130px;
    display: block;
}
</style>
